import { Component } from '@angular/core';

/**
 * @name 标签滚动导航条
 * @selector nova-comp-tag-nav
 * @example
 * <nova-comp-tag-navbar></nova-comp-tag-navbar>
 * @desc
 * 组件目录名：comp-tag-navbar
      组件选择器：
      组件类名：CompTagNavbarComponent


      HTML中DOM元素结构
      class=.tag-body外层DIV（默认出现，展开时隐藏）
        标签按钮DIV
        展开按钮DIV

      class=.tag-expand 折叠DIV（展开按钮点击时出现）
        标题DIV
        标签列表DIV

      交互特性——Style样式
        外层DIV，可以横向拖动

      交互特性——JS事件
        点击展开按钮
        隐藏外层DIV
        显示折叠DIV

 */
@Component({
  selector: 'nova-comp-tag-navbar',
  templateUrl: './comp-tag-navbar.component.html',
  styleUrls: ['./comp-tag-navbar.component.scss']
})
export class CompTagNavbarComponent {

  /**
   * 控制变量：.tag-expand是否显示
   */
  isExpand:Boolean = false;
  /**
   * 控制函数：改变isExpand参数
   */
  toggleExpand(){
    this.isExpand = !this.isExpand
  }
  /**
   * 数据列表：标签列表
   */
  tagList = ["推荐",  "热销",  "活动",  "特色"]
  /**
   * 关键数据：用户当前点击标签名
   */
  currentTag = "推荐"
  /**
   * 根据点击事件，切换当前标签currentTag
   * @param tag 被点击标签名
   */
  tagClick(tag:string){
    console.log(tag)
    this.currentTag = tag
  }
}

